<template>
  <section>
    <div class="filter-container">
        <common-input @keyup.enter.native="handleFilter" class="w200" placeholder="商品关键字" v-model="listQuery.keyword" />
        <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">选品</el-button>
        <el-button size="mini" class="ml10" @click="handleJd" type="primary" v-if="isJd">根据商品编号入库</el-button>
    </div>
    <el-tabs size="mini" :before-leave='leaveTab' v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="草稿" name="1"></el-tab-pane>
      <el-tab-pane label="待审核" name="2"></el-tab-pane>
      <el-tab-pane label="已审核" name="3"></el-tab-pane>
      <el-tab-pane label="被驳回" name="4"></el-tab-pane>
    </el-tabs>
    <template v-if="list && list.length>0">
        <div class="goods-box" :style="{height:tableHeight+'px'}">
            <template v-for="item in list">
                <div :key="item.id" class="good" @mouseenter="currentId=item.id" @mouseleave="currentId=0" :class="{'active':(currentId==item.id)}">
                    <div class="delete" @click="handleDelete(item)" v-if="item.canDelete==1"><i class="el-icon-delete"></i></div>
                    <div class="pic">
                        <img :src="item.listImgUrl" />
                        <span class="status">{{ item.statusText }}</span>
                    </div>
                    <div class="cont">
                        <div class="title ellipsis2">{{item.title}}</div>
                        <div class="block">
                            <div class="label">
                                <span>{{ item.cateName }}</span>
                            </div>
                            <div class="sub">
                                供货价/库存数：￥{{ item.minSupplyPrice }}/{{ item.inventory }}件
                            </div>

                        </div>
                        <div class="block2">
                            <el-button v-if="item.canEdit==1" size="mini" @click="handleUpdate(item)" type="primary">编辑</el-button>
                            <el-button v-if="item.canSubmit==1" size="mini" class="ml10" @click="handleSubmit(item)" type="primary">提交审核</el-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
    </template>
    <div v-else style="color:#999;">还没有商品</div>
    
    <el-dialog title="输入京东商品编号" :visible.sync="dialogForm2Visible" :close-on-click-modal="false" width="500px" @close="dialogClose2">
        <el-form :model="form2" ref="form2" label-width="150px">
            <el-form-item label="商品编号" prop="rate">
                <el-input type="number" v-model.number="form2.number" size="mini" placeholder="商品编号"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogForm2Visible=false">取消</el-button>
            <el-button size="mini" type="primary" @click="check2('form2')">确定</el-button>
        </div>
    </el-dialog>
  </section>
</template>

<script>
    import {
        product_list,
        product_delete,
        product_submit
    } from '../../api/product';
    import {
        agency_is1688,
        agency_isJd
    } from '../../api/agency';
    export default {
        components: {
        },
        data() {
            return {
                form2: {
                    number: ""
                },
                dialogForm2Visible: false,
                tableHeight: 200,
                list: null,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 21,
                    keyword: undefined,
                    auditStatus: '1',
                    contractEnd: undefined
                },
                total: null,
                activeName: '1',
                currentId: 0,
                isJd: false,
            }
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        created() {
            if(this.$route.query.tab) {
                this.activeName = this.$route.query.tab;
                this.listQuery.auditStatus = this.activeName;
            }
            if(this.$route.query.pageNum) {
                this.listQuery.pageNum = this.$route.query.pageNum
                if(!this.listQuery.pageNum) {
                    this.listQuery.pageNum = 1;
                }
            }
            this._getTableHeight();
            this.getList();
            agency_isJd().then((res2)=>{
                this.isJd = res2.data == "1";
            }).catch((err)=>{

            })
        },
        methods: {
            check2(formName) {
                this.form2.number = $.trim(this.form2.number)
                if(this.form2.number.length < 1) {
                    this.$message.error("请输入商品编号");
                    return;
                }
                let {href} = this.$router.resolve({path: '/jd_submit?id=' + this.form2.number});
                window.open(href, '_blank');
            },
            dialogClose2() {
                this.$refs.form2.resetFields();
            },
            handleJd() {
                this.form2.number = "";
                this.dialogForm2Visible = true;
            },
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 230
            },
            getList() {
                this.listLoading = true;
                product_list(this.listQuery).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.listLoading = false;
                })
            },
            handleFilter() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            handleClick(tab, event) {
                this.listQuery.auditStatus = this.activeName;
                this.handleFilter();
            // console.log(this.activeName)
            },
            leaveTab(activeName, oldActiveName) {
            // console.log(activeName)
            // return false;
            },
            handleCreate() {
                this.$router.push("/goods_submit") 
            },
            handleUpdate(row) {
                this.$router.push("/goods_edit?id=" + row.id + "&from=" + encodeURIComponent("goods_create?tab=" + this.activeName + "&pageNum=" + this.listQuery.pageNum)) 
            },
            handleSubmit(row) {
                this.$confirm('此操作将提交商品审核, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_submit(row.id)
                            .then(() => {
                                this.$message.success("商品已提交审核");
                                this.getList();
                            });
                    }).catch(()=>{});
                
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_delete([row.id])
                            .then(() => {
                                this.$message.success("商品删除成功");
                                this.getList();
                            });
                    }).catch(()=>{});
            }
        }
    };
</script>
<style lang="scss" scoped>
    .goods-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-bottom: 30px;
        overflow: auto;

        .good {
            width: 198px;
            height: 315px;
            background: #fff;
            -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
            box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
            border-radius: 4px;
            margin: 24px 8px 0;
            position: relative;

            .delete {
                cursor: pointer;
                display: none;
                color: #fff;
                background-color: rgba(0,0,0,.8);
                width: 31px;
                height: 31px;
                padding: 5px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: absolute;
                font-size: 14px;
                text-align: center;
                top: 0;
                right: 0;
                z-index: 1;
                overflow: hidden;
            }

            .label {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                margin-top: 8px;

                span {
                    padding: 0 4px;
                    line-height: 20px;
                    text-align: center;
                    font-size: 12px;
                    font-weight: 700;
                    color: #fff;
                    background: #001529;
                    border-radius: 2px;
                }
            }

            .sub {
                font-size: 12px;
                color: #666;
                margin-top: 10px;
            }

            .title {
                font-size: 14px;
                font-weight: 700;
                color: #333;
                line-height: 16px;
                height: 32px;
            }

            .block {
                display: block;
            }

            .block2 {
                display: none;
                text-align: center;
            }

            &.active {
                .block {
                    display: none;
                }

                .block2 {
                    display: block;;
                }

                .delete {
                    display: block;
                }
            }

            .cont {
                padding: 8px;
                position: relative;
                z-index: 1;
            }

            .pic {
                width: 198px;
                height: 198px;
                border-radius: 4px 4px 0 0;
                overflow: hidden;
                position: relative;

                img {
                    width: 100%;
                    height:100%;
                }

                .detail-hint {
                    position: absolute;
                    left: 50%;
                    top: 40%;
                    -webkit-transform: translateX(-50%) translateY(-50%);
                    transform: translateX(-50%) translateY(-50%);
                    font-size: 12px;
                    color: #fff;
                    line-height: 24px;
                    padding: 0 10px;
                    border-radius: 2px;
                    opacity: 0;
                    -webkit-transition: .3s;
                    transition: .3s;
                    background: rgba(0,0,0,.8);
                }
            }

            .status {
                width: 58px;
                text-align: center;
                line-height: 26px;
                background: rgba(0,0,0,.8);
                font-size: 12px;
                color: #fff;
                font-weight: 700;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
    }
</style>
